import React from 'react';
import { useParams } from 'react-router-dom';
import { Award, CheckCircle, XCircle, AlertTriangle } from 'lucide-react';
export function ProductReview() {
  const {
    productId
  } = useParams();
  // This would normally come from an API or database
  // For this example, we're hardcoding a review
  const review = {
    title: "Arc'teryx Beta AR Jacket",
    subtitle: 'The ultimate all-round mountain shell for severe conditions',
    heroImage: 'https://images.unsplash.com/photo-1608235375712-be654ace4420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
    category: 'Shell Jackets',
    rating: 5,
    durabilityScore: 5,
    bestFor: 'Alpine Climbing, Backcountry Skiing, Hiking',
    price: 599,
    weight: '425g (15oz)',
    waterproofRating: 'GORE-TEX Pro (28,000mm)',
    breathability: 'High (25,000g/m²/24hr)',
    packability: 'Medium',
    pros: ['Exceptional durability', 'Outstanding weather protection', 'Excellent hood design that fits over helmets', 'Pit zips for ventilation', 'Reinforced high-wear areas'],
    cons: ['Premium price point', 'Slightly heavier than minimalist shells', 'Crinkly fabric noise'],
    fieldTest: "We tested the Arc'teryx Beta AR through three seasons in the Cascade Mountains, including heavy rain, snow, and high winds. The jacket endured over 20 days of alpine climbing, backcountry skiing, and hiking in temperatures ranging from -10°C to 15°C.",
    durabilityBuild: 'The 80D GORE-TEX Pro fabric in high-wear areas shows no signs of abrasion after being scraped against granite and worn under heavy backpacks. Zippers remain smooth and water-tight. Stitching is flawless with no loose threads.',
    performanceData: 'In a 4-hour continuous rain test, no moisture penetrated the shell. Breathability testing while skinning uphill in 5°C temperatures showed excellent moisture management when paired with appropriate base layers. The hood remained secure in 50km/h winds.',
    verdict: "The Arc'teryx Beta AR justifies its premium price with exceptional performance and durability. It's an investment piece for serious outdoor enthusiasts who need reliable protection in harsh conditions. While not the lightest option available, the durability-to-weight ratio is excellent. Best suited for those who prioritize bombproof protection over ultralight packability."
  };
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <div className="relative h-[50vh] md:h-[60vh]">
        <img src={review.heroImage} alt={review.title} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-earth-dark to-transparent"></div>
        <div className="absolute bottom-0 left-0 right-0 p-6 md:p-12">
          <div className="container mx-auto">
            <span className="inline-block bg-climbing-red px-4 py-1 font-display mb-4">
              {review.category}
            </span>
            <h1 className="font-display text-4xl md:text-6xl text-white mb-2">
              {review.title}
            </h1>
            <p className="text-xl text-sand-light mb-4 max-w-3xl">
              {review.subtitle}
            </p>
          </div>
        </div>
      </div>
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Main Content */}
          <div className="lg:col-span-2">
            {/* Field Test Section */}
            <section className="mb-12">
              <h2 className="font-display text-3xl md:text-4xl mb-6">
                THE FIELD TEST
              </h2>
              <p className="mb-6 text-gray-300 leading-relaxed">
                {review.fieldTest}
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <img src="https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Field testing in mountains" className="w-full h-64 object-cover rounded-lg" />
                <img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Field testing in rain" className="w-full h-64 object-cover rounded-lg" />
              </div>
            </section>
            {/* Durability & Build Section */}
            <section className="mb-12">
              <h2 className="font-display text-3xl md:text-4xl mb-6">
                DURABILITY & BUILD
              </h2>
              <p className="mb-6 text-gray-300 leading-relaxed">
                {review.durabilityBuild}
              </p>
              <div className="bg-carbon-black p-6 rounded-lg">
                <h3 className="font-display text-xl mb-4">
                  MATERIALS BREAKDOWN
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="flex items-center">
                    <div className="w-4 h-4 rounded-full bg-outdoor-orange mr-3"></div>
                    <span>Main Body: N80p-X GORE-TEX Pro</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-4 h-4 rounded-full bg-climbing-red mr-3"></div>
                    <span>Reinforcements: N155p-X GORE-TEX Pro</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-4 h-4 rounded-full bg-forest-green mr-3"></div>
                    <span>Zippers: WaterTight™ with RS™ sliders</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-4 h-4 rounded-full bg-lake-blue mr-3"></div>
                    <span>Hood: StormHood™ with laminated brim</span>
                  </div>
                </div>
              </div>
            </section>
            {/* Performance Data Section */}
            <section className="mb-12">
              <h2 className="font-display text-3xl md:text-4xl mb-6">
                PERFORMANCE DATA
              </h2>
              <p className="mb-6 text-gray-300 leading-relaxed">
                {review.performanceData}
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                {/* Weather Protection Chart */}
                <div className="bg-carbon-black p-6 rounded-lg">
                  <h3 className="font-display text-xl mb-4">
                    WEATHER PROTECTION
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between mb-1">
                        <span>Rain Resistance</span>
                        <span>Excellent</span>
                      </div>
                      <div className="w-full bg-gray-700 rounded-full h-2.5">
                        <div className="bg-outdoor-orange h-2.5 rounded-full" style={{
                        width: '100%'
                      }}></div>
                      </div>
                    </div>
                    <div>
                      <div className="flex justify-between mb-1">
                        <span>Wind Resistance</span>
                        <span>Excellent</span>
                      </div>
                      <div className="w-full bg-gray-700 rounded-full h-2.5">
                        <div className="bg-outdoor-orange h-2.5 rounded-full" style={{
                        width: '100%'
                      }}></div>
                      </div>
                    </div>
                    <div>
                      <div className="flex justify-between mb-1">
                        <span>Snow Shedding</span>
                        <span>Very Good</span>
                      </div>
                      <div className="w-full bg-gray-700 rounded-full h-2.5">
                        <div className="bg-outdoor-orange h-2.5 rounded-full" style={{
                        width: '90%'
                      }}></div>
                      </div>
                    </div>
                  </div>
                </div>
                {/* Comfort & Mobility Chart */}
                <div className="bg-carbon-black p-6 rounded-lg">
                  <h3 className="font-display text-xl mb-4">
                    COMFORT & MOBILITY
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <div className="flex justify-between mb-1">
                        <span>Range of Motion</span>
                        <span>Very Good</span>
                      </div>
                      <div className="w-full bg-gray-700 rounded-full h-2.5">
                        <div className="bg-lake-blue h-2.5 rounded-full" style={{
                        width: '90%'
                      }}></div>
                      </div>
                    </div>
                    <div>
                      <div className="flex justify-between mb-1">
                        <span>Breathability</span>
                        <span>Good</span>
                      </div>
                      <div className="w-full bg-gray-700 rounded-full h-2.5">
                        <div className="bg-lake-blue h-2.5 rounded-full" style={{
                        width: '80%'
                      }}></div>
                      </div>
                    </div>
                    <div>
                      <div className="flex justify-between mb-1">
                        <span>Next-to-Skin Feel</span>
                        <span>Average</span>
                      </div>
                      <div className="w-full bg-gray-700 rounded-full h-2.5">
                        <div className="bg-lake-blue h-2.5 rounded-full" style={{
                        width: '60%'
                      }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            {/* The Good, The Bad, The Muddy Section */}
            <section className="mb-12">
              <h2 className="font-display text-3xl md:text-4xl mb-6">
                THE GOOD, THE BAD, THE MUDDY
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* The Good */}
                <div className="bg-carbon-black p-6 rounded-lg">
                  <div className="flex items-center mb-4">
                    <CheckCircle size={24} className="text-forest-green mr-2" />
                    <h3 className="font-display text-xl">THE GOOD</h3>
                  </div>
                  <ul className="space-y-2">
                    {review.pros.map((pro, index) => <li key={index} className="flex items-start">
                        <span className="text-forest-green mr-2">+</span>
                        <span>{pro}</span>
                      </li>)}
                  </ul>
                </div>
                {/* The Bad */}
                <div className="bg-carbon-black p-6 rounded-lg">
                  <div className="flex items-center mb-4">
                    <XCircle size={24} className="text-climbing-red mr-2" />
                    <h3 className="font-display text-xl">THE BAD</h3>
                  </div>
                  <ul className="space-y-2">
                    {review.cons.map((con, index) => <li key={index} className="flex items-start">
                        <span className="text-climbing-red mr-2">-</span>
                        <span>{con}</span>
                      </li>)}
                  </ul>
                </div>
                {/* The Muddy */}
                <div className="bg-carbon-black p-6 rounded-lg">
                  <div className="flex items-center mb-4">
                    <AlertTriangle size={24} className="text-outdoor-orange mr-2" />
                    <h3 className="font-display text-xl">THE MUDDY</h3>
                  </div>
                  <ul className="space-y-2">
                    <li className="flex items-start">
                      <span className="text-outdoor-orange mr-2">~</span>
                      <span>Color options may be limited by season</span>
                    </li>
                    <li className="flex items-start">
                      <span className="text-outdoor-orange mr-2">~</span>
                      <span>
                        Fit is athletic but may require sizing up for layers
                      </span>
                    </li>
                    <li className="flex items-start">
                      <span className="text-outdoor-orange mr-2">~</span>
                      <span>
                        Chest pocket placement works with harness but not ideal
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            </section>
            {/* The Verdict Section */}
            <section className="mb-12">
              <h2 className="font-display text-3xl md:text-4xl mb-6">
                THE VERDICT
              </h2>
              <div className="bg-carbon-black p-6 rounded-lg">
                <p className="text-gray-300 leading-relaxed">
                  {review.verdict}
                </p>
              </div>
            </section>
          </div>
          {/* Sidebar */}
          <div className="lg:col-span-1">
            {/* Mission Brief Card */}
            <div className="bg-carbon-black p-6 rounded-lg sticky top-24">
              <h3 className="font-display text-2xl mb-6 text-center">
                MISSION BRIEF
              </h3>
              {/* Rating */}
              <div className="mb-6 text-center">
                <div className="flex justify-center mb-2">
                  {[...Array(5)].map((_, i) => <Award key={i} size={28} className={i < review.rating ? 'text-outdoor-orange' : 'text-gray-600'} />)}
                </div>
                <span className="font-display text-xl">OPENGO RATING</span>
              </div>
              {/* Durability Score */}
              <div className="mb-6">
                <h4 className="font-display text-lg mb-2">DURABILITY SCORE</h4>
                <div className="flex items-center">
                  <div className="flex-grow h-2 bg-gray-700 rounded-full overflow-hidden">
                    <div className="h-full bg-outdoor-orange rounded-full" style={{
                    width: `${review.durabilityScore / 5 * 100}%`
                  }}></div>
                  </div>
                  <span className="ml-3 font-display">
                    {review.durabilityScore}/5
                  </span>
                </div>
              </div>
              {/* Best For */}
              <div className="mb-6">
                <h4 className="font-display text-lg mb-2">BEST FOR</h4>
                <p className="text-gray-300">{review.bestFor}</p>
              </div>
              {/* Key Specs */}
              <div className="mb-6">
                <h4 className="font-display text-lg mb-2">KEY SPECS</h4>
                <div className="space-y-2">
                  <div className="flex justify-between">
                    <span className="text-gray-400">Weight</span>
                    <span>{review.weight}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400">Waterproof</span>
                    <span>{review.waterproofRating}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400">Breathability</span>
                    <span>{review.breathability}</span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-gray-400">Packability</span>
                    <span>{review.packability}</span>
                  </div>
                </div>
              </div>
              {/* Price */}
              <div className="mb-6">
                <h4 className="font-display text-lg mb-2">MSRP</h4>
                <p className="text-2xl">${review.price}</p>
              </div>
              {/* CTA Button */}
              <a href="#" className="block w-full bg-outdoor-orange hover:bg-climbing-red text-white font-display text-center py-3 rounded transition-colors">
                CHECK PRICE
              </a>
              <p className="text-xs text-gray-400 text-center mt-3">
                *Price may vary. We may earn a commission.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>;
}